<template>
  <HeaderLayout
    title = '视频回顾'
  >
    <div class="list">
      <Row :gutter="12">
        <Col :span="12" v-for="(v, i) in data" :key="i">
          <div class="card" @click="handleClick(v, i, $event)">
            <div class="card-preview">
              <img v-lazy="v.preview" />
            </div>
            <div class="card-content">
              <h2>{{ v.title }}</h2>
              <div class="card-content-extra">
                <div class="card-date">{{ moment(v.date).format('MM月MM日 HH:mm') }}</div>
                <Icon type = 'shipinbofang' />
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="bottom-text dark"><i></i>您竟然滑到底了<i></i></div>
  </HeaderLayout>
</template>

<script>

import moment from 'moment'
import Icon from '@/component/icon/index.vue'
import { Row, Col } from 'vant'
import HeaderLayout from '@/layout/headerLayout/index.vue'

const now = new Date().getTime()

export default {

  name: 'index',

  data () {
    return {
      data: [...Array(10)].map((v, i) => ({
        id: i,
        // 标题
        title: '第二届中国医师协会神经介入年中国医师第二届中国医师协会神经介入年中国医师',
        // 预览图片
        preview: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=416186181,1258212271&fm=200&gp=0.jpg',
        // 视频地址
        src: '',
        // 日期
        date: now
      }))
    }
  },

  methods: {
    moment,
    handleClick: function (v, i, e) {
      this.$router.push(`video/${ v.id }`)
    }
  },

  components: {
    HeaderLayout,
    Icon,
    Row,
    Col,
  }
}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.list {
  padding: 12px 12px;
  margin-bottom: 90px;

  /deep/ .van-col--12 {
    margin-top: 12px;

    &:nth-child(1),
    &:nth-child(2) {
      margin-top: 0;
    }
  }
}

.card {
  height: 214px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  box-shadow:0 2px 2px rgba(0,0,0,.08);
  border-radius: 6px;
  display: flex;
  flex-direction: column;

  &-preview {
    height: 117px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #bbb;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      vertical-align: top;
    }
  }

  &-content {
    flex-grow: 1;
    padding: 15px 10px 12px;
    display: flex;
    flex-direction: column;

    h2 {
      font-size: 14px;
      line-height: 1.3;
      color: #262626;
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      flex-shrink: 0;
    }

    &-extra {
      flex-grow: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      i {
        color: #0BB375;
        font-size: 28px;
        flex-shrink: 0;
        position: relative;
        top: 7px;
      }
    }
  }

  &-date {
    font-size: 12px;
    color: #A2A2A2;
  }
}
</style>